<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="robots" content="all"/>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>

    <title>留言板</title>
    <link rel="stylesheet" th:href="@{/css/message.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/master.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}" type="text/css"/>
</head>
<body>
<div class="header">
</div>
<div th:replace="comm/Wl2022-Comm :: #commHeader"></div>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <h1>留言板</h1>
                <p> 我知道，第一次上线会有点小bug、但是不要惊慌，联系我，连夜改</p>
                <p> 大家还可以在留言板给我的小网站提点小建议</p>
                <p> 觉得哪里不够完善，或者哪些功能缺失，都可以在留言板提一提，连夜改</p>
                <p> 谢谢大家😁😁😁</p>
            </section>
            <!--一级留言区域-->
            <div class="textarea-wrap message" id="textarea-wrap">
                <form class="layui-form blog-editor" action="">
                    <!--只有登陆了的才可以评论（提交回复表单之前，先校验loginUser是否为空）-->
                    <input type="hidden" name="userId" id="userId" th:value="${session.loginUserId}">
                    <!--对网站的回复，默认文章id为0-->
                    <input type="hidden" name="articleId" id="articleId" th:value="0">
                    <div class="layui-form-item">
                        <textarea id="remarkEditor" name="remarkEditor" placeholder="请输入内容(300字)"
                                  οnchange="this.value=this.value.substring(0, 300)"
                                  οnkeydοwn="this.value=this.value.substring(0, 300)"
                                  οnkeyup="this.value=this.value.substring(0, 300)"
                                  class="layui-textarea" maxlength="300" rows="6" ></textarea>
                    </div>
                    <div class="layui-form-item">
                        <!--  提交留言功能，判断session中是否有loginUser，没有则触发弹框事件，有就提示提交成功，局部刷新页面-->
                        <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit
                                lay-filter="submitToWl2022">
                            提交留言
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="f-cb"></div>
        <div class="mt20">
            <ul class="message-list" id="message-list">
                <div th:fragment="messageList" th:id="messageList">
                    <!--评论列表-->
                    <li class="zoomIn article" th:if="${session.originList}!=null"
                        th:each="origin : ${session.originList}">
                        <!--一级评论-->
                        <div class="comment-parent">
                            <a th:name="|remark-${origin.getId()}|"></a>
                            <!--头像-->
                            <img th:src="@{|/image/userImage/${origin.getHeadImage()}|}"
                                 th:alt="${origin.getNickName()}">
                            <!--用户账号-->
                            <div class="info"><span class="username">[[${origin.getNickName()}]] <span
                                    th:if="${origin.reviewerIdentity}==1" class="layui-badge layui-bg-orange">管理员</span></span>
                            </div>
                            <!--评论内容-->
                            <div class="comment-content">
                                [[${origin.getContent()}]]
                            </div>
                            <!--创建时间-->
                            <p class="info info-footer">
                                <span class="comment-time">[[${#dates.format(origin.getCreateTime())}]]</span>
                                <a href="javascript:;" class="btn-reply" th:data-targetid="${origin.getId()}"
                                   th:data-targetname="${origin.getNickName()}">回复</a>
                            </p>
                        </div>
                        <hr/>
                        <!--二级评论和多级评论-->
                        <!--循环开始-->
                        <div class="comment-child" th:each="child:${origin.getReplyComments()}"
                             th:if="${origin.getReplyComments()}!=null">
                            <a th:name="|reply${child.getId()}|"> </a>
                            <!--用户头像-->
                            <img th:src="@{|/image/userImage/${child.getHeadImage()}|}"
                                 th:alt="${child.getNickName()}">
                            <div class="info">
                                <!--用户账号-->
                                <span class="username">[[${child.getNickName()}]] <span
                                        th:if="${child.reviewerIdentity}==1"
                                        class="layui-badge layui-bg-orange">管理员</span></span>
                                <span style="padding-right:0;margin-left:-5px;">回复</span>
                                <!-- 父姓名-->
                                <span class="username">[[${child.getParentNickName()}]]</span>
                                <!--回复内容-->
                                <span>[[${child.getContent()}]]</span>
                            </div>
                            <p class="info">
                                <span class="comment-time">[[${#dates.format(child.getCreateTime())}]]</span>
                                <a href="javascript:;" class="btn-reply" th:data-targetid="${child.getId()}"
                                   th:data-targetname="${child.getNickName()}">回复</a></p>
                        </div>
                        <div class="replycontainer layui-hide">
                            <form class="layui-form" action="">
                                <!-- 回复时记录文章id，用户id，评论内容，被回复的评论的id-->
                                <input type="hidden" name="remarkId" th:value="${session.loginUserId}">
                                <input type="hidden" name="targetCommentId" value="">
                                <!--输入框，当点击回复时打开，收起时关闭-->
                                <div class="layui-form-item">
                                    <textarea name="replyContent" placeholder=""
                                              maxlength="100"
                                              οnchange="this.value=this.value.substring(0, 100)"
                                              οnkeydοwn="this.value=this.value.substring(0, 100)"
                                              οnkeyup="this.value=this.value.substring(0, 100)"
                                              class="layui-textarea" style="min-height:80px;"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <!--提交按钮-->
                                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="formReply"
                                            lay-filter="formReply">提交
                                    </button>
                                </div>
                            </form>
                        </div>
                    </li>
                </div>
            </ul>
            <div class="layui-flow-more">没有更多了</div>
        </div>
    </div>
</div>
<div th:replace="comm/Wl2022-Comm::#commFooter"></div>


<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>
<!--    页面顶部进度条  -->
<script>NProgress.start();</script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>
<script>
    //回复框
    layui.use(['jquery', 'form',], function () {
        const form = layui.form;
        const $ = layui.jquery;
        //评论和留言的编辑器的验证
        form.on('submit(submitToWl2022)', function () {
            let articleId = $("#articleId").val();
            let userVal = $("#userId").val();
            let contentVal = $('#remarkEditor').val();
            //当userVal不为空，代表已经登录
            console.log(userVal);
            console.log(contentVal);
            if ((userVal === "") || userVal === null) {
                layer.msg('请先登录', {icon: 7});
            } else {
                if ((contentVal === "" || contentVal === null)) {
                    layer.msg('评论信息不能为空！', {icon: 5});
                } else {
                    //当评论内容不为空时
                    $.ajax({
                        type: 'Post',
                        url: '[[@{/comment/replayArticle}]]',
                        data: {
                            articleId: articleId,
                            userId: userVal,
                            content: contentVal
                        },
                        success: function (data) {
                            $("#messageList").html(data);
                        },
                        complete: function () {
                            $('#remarkEditor').val('');
                            layer.open({
                                title: '提交成功',
                                content: '提交成功',
                                icon: 6,
                            });
                        },
                        error: function () {
                            layer.open({
                                title: '提交错误',
                                content: '程序故障！留言提交出现异常（请在网站下方联系管理员）',
                                icon: 5
                            });
                            $("#remarkEditor").val('');
                        }
                    })
                }
            }
            // 防止页面一闪而过，没有提示信息
            return false;
        });

        //二级回复框
        form.on("submit(formReply)", function (data) {
            const field = data.field;
            let remarkId = field.remarkId;
            let replyContent = field.replyContent;
            let targetCommentId = field.targetCommentId;
            if ((remarkId === "") || remarkId === null) {
                layer.msg('请先登录', {icon: 7});
            } else {
                if ((replyContent === "" || replyContent === null)) {
                    layer.msg('评论信息不能为空！', {icon: 5});
                } else {
                    //当评论内容不为空时
                    $.ajax({
                        type: 'Post',
                        url: '[[@{/comment/replayArticle2}]]',
                        data: {
                            remarkId: remarkId,
                            replyContent: replyContent,
                            targetCommentId: targetCommentId,
                            articleId: 0
                        },
                        success: function (data) {
                            $("#messageList").html(data);
                        },
                        complete: function () {
                            $('.layui-textarea').val('');
                            layer.open({
                                title: '提交成功',
                                content: '提交成功',
                                icon: 6,
                            });
                        },
                        error: function () {
                            layer.open({
                                title: '提交错误',
                                content: '程序故障！留言提交出现异常（请在网站下方联系管理员）',
                                icon: 5
                            });
                            $('.layui-textarea').val('');
                        }
                    })
                }
            }
            return false;
        });


        //回复按钮点击事件
        $('#message-list').on('click', '.btn-reply', function () {
            const targetId = $(this).data('targetid')
                , targetName = $(this).data('targetname')
                , $container = $(this).parent('p').parent().siblings('.replycontainer');
            if ($(this).text() === '回复') {
                $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
                $container.removeClass('layui-hide');
                $container.find('input[name="targetCommentId"]').val(targetId);
                $(this).parents('.message-list li').find('.btn-reply').text('回复');
                $(this).text('收起');
            } else {
                $container.addClass('layui-hide');
                $container.find('input[name="targetCommentId"]').val(0);
                $(this).text('回复');
            }
        });

    });

</script>
</body>
</html>
